<template>
	<view>
		<view class="tabs">
			<view class="tabs-item flex--aj-center" v-for="(item,index) in tabsList" :key="index">
				<view class="item-content flex--aj-center" @click="tabClick(item,index)"
					:class="{'item-content-no': index !== tabCurrent,'item-content-active': index === tabCurrent}">
					{{item.text}}
					<view class="item-img" v-if="index === tabCurrent">
						<image src="../../../../static/icon/order_tab.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="order" v-if="list.length > 0">
			<view class="order-item" v-for="(item,index) in list" :key="index" @click="detailClick(item.id)">
				<view class="item-header flex--justify-between">
					<view class="header-left">
						订单号:{{item.order_no}}
					</view>
					<view class="header-right">
						<text>{{ item.status_text }}</text>
					</view>
				</view>
				<view class="product flex--justify-between" v-for="(gitem,gindex) in item.goods" :key="gindex">
					<view class="product-left">
						<image :src="gitem.spec.spec_image == '' ? gitem.image : gitem.sku_image" mode="scaleToFill"></image>
					</view>
					<view class="product-right">
						<view class="upper">
							<view class="name text-cut">
								{{ gitem.goods_name }}
							</view>
							<!-- <view class="status">
								{{ item.status_text }}
							</view> -->
						</view>
						<view class="lower">
							<view class="nums">
								{{ gitem.goods_attr ? gitem.goods_attr : '' }}
							</view>
							<view class="nums">
								x{{ gitem.total_num }}
							</view>
						</view>
					</view>
				</view>

				<view class="buttom">
					<view class="pay-price">
						实付款：<text>￥{{item.pay_price}}</text>
					</view>

					<view class="btns">
						<view class="btn btn-white" @click.stop="cancelOrder(item,index)"
							v-if="item.pay_status == 10 && item.order_status == 10">
							取消订单
						</view>

						<view class="btn btn-black" @click.stop="payOrder(item,index)"
							v-if="item.pay_status == 10 && item.order_status == 10">
							支付订单
						</view>

						<view class="btn btn-black" @click.stop="confirmOrder(item,index)"
							v-if="item.pay_status == 20 && item.order_status == 10 && item.freight_status == 20 && item.receipt_status == 10">
							确认收货
						</view>

						<view class="btn btn-black" @click.stop="evaluateOrder(item)"
							v-if="item.evaluate_status == 0 && item.pay_status == 20 && item.order_status == 30 && item.freight_status == 20 && item.receipt_status == 20">
							评价
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-else>
			<view class="empty" v-if="show">
				<view class="">
					<image src="../../../../static/icon/mall_order.png" mode=""></image>
				</view>
				<view class="empty-text">
					您还没有订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrent: 0,
				tabsList: [{
						text: '全部',
						status: 0
					},
					{
						text: '待支付',
						status: 10
					},
					{
						text: '待发货',
						status: 20
					},
					{
						text: '待收货',
						status: 30
					},
					{
						text: '待核销',
						status: 50
					},
					{
						text: '已完成',
						status: 40
					}
				],
				list: [],
				page: 1,
				pageSize: 10,
				last_page: 1,
				show: false
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			let _this = this;
			// 已经是最后一页
			if (_this.page >= _this.last_page) {
				return false;
			}

			_this.page++
			_this.getList()
		},
		methods: {
			tabClick(item, index) {
				let _this = this
				if (_this.tabCurrent == index) {
					return false
				}

				_this.tabCurrent = index
				_this.page = 1
				_this.last_page = 1
				_this.list = []
				_this.show = false
				_this.getList()
			},
			getList() {
				let _this = this
				_this.$api.get('mall.order/getOrderList', {
					page: _this.page,
					page_size: _this.pageSize,
					status: _this.tabsList[_this.tabCurrent].status
				}).then(res => {
					_this.show = true
					if (res.code == 1) {
						let list = _this.list.concat(res.data.data)

						_this.list = list

						_this.last_page = res.data.last_page
					} else {
						_this.toast(res.msg)
					}
				}, fail => {})
			},
			detailClick(id) {
				uni.navigateTo({
					url: '/pages/user/mall/order/detail?id=' + id
				})
			},
			cancelOrder(item, index) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('mall.order/cancel', {
								id: item.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									let list = _this.list

									if (_this.tabsList[_this.tabCurrent].status != 0) {
										list.splice(index, 1)
									} else {
										list[index].order_status = 20
										list[index].status_text = '已取消'
									}

									_this.list = list
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			payOrder(item, index) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定付款吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '支付中...'
							})

							_this.$api.post('mall.order/order_pay', {
								id: item.id
							}).then(res => {
								if (res.code == 1) {
									_this.pay(item, index, res.data)
								} else {
									_this.toast(res.msg)
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			pay(item, index, Rdata) {
				let _this = this

				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: Rdata.nonceStr, // 随机字符串
					package: Rdata.package, // 固定值
					timeStamp: Rdata.timestamp, // 时间戳（单位：秒）
					signType: Rdata.signType,
					paySign: Rdata.paySign, // 签名，这里用的 MD5/RSA 签名
					success: res => {
						uni.showModal({
							title: '提示',
							content: '支付成功',
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								let list = _this.list

								if (_this.tabsList[_this.tabCurrent].status != 0) {
									list.splice(index, 1)
								} else {
									list[index].pay_status = 20
									list[index].status_text = '待发货'
								}

								_this.list = list
							},
							fail: () => {},
							complete: () => {}
						})
					},
					fail: (res) => {
						_this.toast('支付失败')
					},
					complete: () => {}
				});
			},

			confirmOrder(item, index) {
				let _this = this

				uni.showModal({
					title: '提示',
					content: '确定收货吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...',
								mask: true
							})
							_this.$api.post('mall.order/finish', {
								id: item.id
							}).then(res => {
								uni.hideLoading()
								_this.toast(res.msg)
								if (res.code == 1) {
									let list = _this.list

									if (_this.tabsList[_this.tabCurrent].status != 0) {
										list.splice(index, 1)
									} else {
										list[index].order_status = 30
										list[index].receipt_status = 20
										list[index].status_text = '已完成'
									}

									_this.list = list
								}
							}, fail => {})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			evaluateOrder(item) {
				uni.navigateTo({
					url: '/pages/user/mall/order/evaluate?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 80rpx;
	}

	.text-cut {
		overflow: hidden;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.flex--aj-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex--justify-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex--align-start {
		display: flex;
		align-items: start;
	}

	.tabs {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		.tabs-item {
			width: 16.6%;

			.item-content {
				width: 120rpx;
				height: 92rpx;
				position: relative;

				.item-img {
					position: absolute;
					top: 20%;
					left: 0;
					width: 120rpx;
					height: 65rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.item-content-no {
				font-weight: 400;
				font-size: 32rpx;
				color: #8A8A8A;
			}

			.item-content-active {
				font-weight: 800;
				font-size: 36rpx;
				color: #000000;
			}
		}
	}

	.order {
		margin-top: 24rpx;

		.order-item {
			background-color: #FFFFFF;
			padding: 24rpx 36rpx 38rpx 36rpx;
			margin-bottom: 24rpx;

			.item-header {
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #F0F0F0;
				font-weight: 800;
				font-size: 32rpx;

				.header-left {
					color: #010101;
				}

				.header-right {
					color: #E1135B;

					text {
						margin-left: 10rpx;
					}
				}
			}

			.product {
				padding-top: 24rpx;
				margin-bottom: 32rpx;

				.product-left {
					width: 161rpx;
					height: 161rpx;					

					image {
						width: 161rpx;
						height: 161rpx;
						border-radius: 10rpx;
					}
				}

				.product-right {
					width: calc(100vw - 161rpx);
					height: 161rpx;
					padding-left: 26rpx;

					.upper {
						display: flex;
						align-items: start;
						justify-content: space-between;

						.name {
							font-weight: 800;
							font-size: 32rpx;
							color: #010101;
							padding-right: 10rpx;
						}

						.status {
							min-width: 100rpx;
							font-weight: 800;
							font-size: 32rpx;
							color: #F73830;
							text-align: end;
						}
					}

					.lower {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 8rpx;

						.nums {
							font-weight: 400;
							font-size: 28rpx;
							color: #8A8A8A;
						}
					}
				}
			}

			.buttom {
				border-top: 2rpx solid #F0F0F0;
				padding-top: 26rpx;

				.pay-price {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;

					text {
						font-weight: 800;
						font-size: 32rpx;
						color: #F73830;
					}
				}

				.btns {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 24rpx;

					.btn {
						border-radius: 32rpx;
						font-weight: 800;
						font-size: 24rpx;
						padding: 16rpx 28rpx;
						margin-left: 46rpx;
					}

					.btn-white {
						border: 2rpx solid #000000;
						background: #FFFFFF;
						counter-reset: #000000;
					}

					.btn-black {
						color: #FFFFFF;
						background: #000000;
					}
				}
			}
		}
	}

	.empty {
		width: 100%;
		text-align: center;
		margin-top: 20%;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #999999;
			margin-top: 80rpx;
		}
	}
</style>